* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  height: 100%;
  background-image: url(../images/f1_1.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

// 云
.cloud {
  transition: all 1s;
  img {
    position: absolute;
    left: 50%;
    &:nth-child(1) {
      margin-left: -200px;
      top: 20px;
      animation: cloud 1s infinite alternate linear;
    }
    &:nth-child(2) {
      margin-left: 200px;
      top: 50px;
      animation: cloud 1s 0.4s infinite alternate linear;
    }
    &:nth-child(3) {
      margin-left: -320px;
      top: 100px;
      animation: cloud 1s 0.6s infinite alternate linear;
    }
  }
}

@keyframes cloud {
  100% {
    transform: translate(20px);
  }
}

.lu {
  position: absolute;
  left: 57%;
  top: 13%;
  img {
    width: 120px;
  }
}

//
.font {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: font 1s;
  img {
    width: 300px;
  }
}

// 从默认到小 到大
@keyframes font {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  20% {
    transform: translate(-50%, -50%) scale(0.1);
  }
  40% {
    transform: translate(-50%, -50%) scale(1.4);
  }
  70% {
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.sun {
  position: absolute;
  top: 20%;
  left: 30%;
  animation: sun 1s infinite alternate linear;
}
@keyframes sun {
  100% {
    transform: translateY(20px);
  }
}
